<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body onload="list()">
    <h1>待办事项清单</h1>
    <p><input type="text" placeholder="添加新事项" id="add">
        <input type="button" value="+" onclick="add()">
    </p>
        <p><input type='text' size='20px' placeholder="删除事项" id='del'/>
        <input type='button' value="-" onclick="deleted()"/></p>
        <p><input type='button' value="已完成事项" onclick="overcompleted()"/>
        <input type='button' value="未完成事项" onclick="neverfinish()"/>
        <input type='button' value="所有事项" onclick="all_list()"/></p>
    <ul id="text">
    </ul>
</body>
<script>
    function list(){
        fetch("/todos")
            .then(function(response){
                return response.json();
            })
            .then(function(data){
                document.getElementById("text").innerHTML="";
                var todos=data.todos
                for(var i=0;i<todos.length;i++){
                var s='<li><input type="checkbox" name="'+todos[i].id+'"onchange="Finish(this.name)">'+todos[i].id+''+todos[i].title+'</li>'
                document.getElementById("text").innerHTML+=s;
                }
            });}

    function add(){
        var title=document.getElementById("add").value;
        var url='/create';
        var headers={"Content-Type":"application/x-www-form-urlencoded"}
        fetch(url,{
            method:'POST',
            body:'title='+title,
            headers:headers})
            .then(res=>res.json())
            list();
        }

    function deleted(){
        var id=parseInt(document.getElementById("del").value);
        var url='/delete';
        var headers={"Content-Type":"application/x-www-form-urlencoded"}
        fetch(url,{
            method:'POST',
            body:'id='+id,
            headers:headers})
            .then(function(response){
            return response.json();
        })
        .then(function(data){
            data=console.log();
            list();
                location.reload()
        })
        }

    function Finish(id){
        fetch('/completed'+'?id='+id)
        .then(function(response){
            return response.json();
        })
    }

    function overcompleted(){
        fetch('/things'+'?completed=1')
        .then(function(response){
            return response.json();
    })
        .then(function(data){
            document.getElementById("text").innerHTML="";
            var todos=data.todos
            for(var i=0;i<todos.length;i++){
                var s='<li><input type="checkbox" name="'+todos[i].id+'"onchange="Finish(this.name)">'+todos[i].id+''+todos[i].title+'</li>'
                document.getElementById("text").innerHTML+=s;
                }
   })}

    function neverfinish(){
        fetch('/things')
        .then(function(response){
            return response.json();
    })
        .then(function(data){
            document.getElementById("text").innerHTML="";
            var todos=data.todos
            for(var i=0;i<todos.length;i++){
                var s='<li><input type="checkbox" name="'+todos[i].id+'"onchange="Finish(this.name)">'+todos[i].id+''+todos[i].title+'</li>'
                document.getElementById("text").innerHTML+=s;
            }
    })}

    function all_list(){
        fetch('/things'+'?completed=all')
        .then(function(response){
          return response.json();
       })
        .then(function(data){
            document.getElementById("text").innerHTML="";
            var todos=data.todos
            for(var i=0;i<todos.length;i++){
                var s='<li><input type="checkbox" name="'+todos[i].id+'"onchange="Finish(this.name)">'+todos[i].id+''+todos[i].title+'</li>'
                document.getElementById("text").innerHTML+=s;
            }
   })}
    </script>
</html>